<!-- src/views/ToolDetail.vue -->
<template>
    <component :is="componentName" />
  </template>
  
  <script>
  export default {
    data() {
      return {
        componentName: null,
      };
    },
    async beforeRouteEnter(to, from, next) {
      next(async (vm) => {
        await vm.loadComponent(to.params.name);
      });
    },
    watch: {
      '$route.params.name': {
        immediate: true,
        handler(newName) {
          this.loadComponent(newName);
        },
      },
    },
    methods: {
      async loadComponent(name) {
        try {
          const componentName = await import(`@/doc/${name}.vue`);
          this.componentName = componentName.default;
        } catch (error) {
          console.error("Failed to load component:", error);
        }
      },
    },
  };
  </script>
  